/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";
import * as React from "react";
import {Container, Text, Toolbar, useMMenuBarOcup, useTheme} from "customize-easy-ui-component";
import {Link as RouterLink} from "../routing/Link";
import food from "../images/food.svg";
import {Layout} from "../Layout";


type ContainerProps = React.HTMLAttributes<HTMLElement>;

export const AloneContainer: React.FunctionComponent<ContainerProps> = (
  props: ContainerProps
) => {
    const theme = useTheme();
    const { barHeight,bottomCss } = useMMenuBarOcup(false);

  return (
      <Layout>
          <div  css={{
              display: 'flex',
              justifyContent: 'space-between',
              flexWrap: 'nowrap',
              flexDirection: 'column',
              alignItems: 'stretch',
              maxWidth: 'unset',
              boxSizing: "border-box",
              flex: "1",
              boxShadow: "none",
              position: "absolute",
              width: "100%",
              borderRadius: 0,
              minHeight: `calc(100vh - ${barHeight} - 64px)`,
              paddingBottom: `${barHeight}`,
          }}>
              <Toolbar>
                  <RouterLink　href="/">
                      <Text
                          variant="h5"
                          css={{
                              alignItems: "center",
                              display: "flex",
                              color: "#43596c"
                          }}
                          gutter={false}
                      >
                          <img
                              css={{
                                  marginRight: theme.spaces.sm,
                                  width: "30px",
                                  height: "30px"
                              }}
                              src={food} alt={``}
                              aria-hidden
                          />
                          <span>检验平台</span>
                      </Text>
                  </RouterLink>
                  <div css={{ marginLeft: "auto" }}>
                  </div>
              </Toolbar>

              <Container css={{
                  display: 'flex',
                  alignItems: 'center',
                  //height: '100%',
                  flexDirection: 'column',
                  margin: 'auto',
                 }}
                 {...props}
              >

              </Container>
          </div>
      </Layout>
  );
};
